<script lang="ts" setup>
  import dayjs from 'dayjs';
  import { onMounted, ref } from 'vue';
  import useTable from '@/hooks/table';
  import { CmsColumn } from '@/types/cms';
  import { deleteColumn, getColumnList } from '@/api/cms';
  import { Modal } from '@arco-design/web-vue';
  import ColumnEditor from './editor.vue';

  const { pager, loading, list } = useTable<CmsColumn>();

  const getData = async () => {
    loading.value = true;
    try {
      const res = await getColumnList({
        ...pager.value,
      });
      list.value = res?.data?.data || [];
    } finally {
      loading.value = false;
    }
  };

  const handlePageIndexChanged = (pageIndex: number) => {
    pager.value.pageIndex = pageIndex;
    getData();
  };

  const editorConfig = ref<{
    visible: boolean;
    column?: CmsColumn;
  }>({
    visible: false,
  });

  const beginCreate = () => {
    editorConfig.value = { visible: true };
  };

  const beginEdit = (column: CmsColumn) => {
    editorConfig.value = {
      visible: true,
      column,
    };
  };

  const handleEditorDone = (refresh: boolean) => {
    if (refresh) {
      getData();
    }
    editorConfig.value = {
      visible: false,
    };
  };

  const handleDelete = (author: CmsColumn) => {
    Modal.confirm({
      title: '确认删除？',
      content: '删除后无法恢复',
      async onBeforeOk() {
        await deleteColumn(author.id);
        getData();
      },
    });
  };

  onMounted(() => {
    getData();
  });
</script>

<template>
  <div style="padding: 20px">
    <a-row :gutter="[20, 20]">
      <a-col>
        <a-card title="栏目管理" :bordered="false">
          <template #extra>
            <a-button type="primary" @click="beginCreate">
              <template #icon>
                <icon-plus />
              </template>
              添加栏目
            </a-button>
          </template>
        </a-card>
      </a-col>

      <a-col>
        <a-card :bordered="false">
          <a-table
            :bordered="{ cell: true }"
            :data="list"
            :loading="loading"
            :pagination="false"
            row-key="id"
            @page-change="handlePageIndexChanged"
          >
            <template #columns>
              <a-table-column title="栏目" data-index="columnName">
                <template #cell="{ record }">
                  <div class="column-card">
                    <div class="column-card-pic">
                      <img :src="record.columnPic" />
                    </div>
                    <div class="column-card-name">
                      {{ record.columnName }}
                    </div>
                  </div>
                </template>
              </a-table-column>
              <a-table-column title="添加时间" data-index="gmtCreate">
                <template #cell="{ record }">
                  {{ dayjs(record.gmtCreate).format('YYYY/MM/DD HH:mm:ss') }}
                </template>
              </a-table-column>
              <a-table-column title="修改时间">
                <template #cell="{ record }">
                  {{
                    record.gmtUpdate
                      ? dayjs(record.gmtUpdate).format('YYYY/MM/DD HH:mm:ss')
                      : '-'
                  }}
                </template>
              </a-table-column>
              <a-table-column title="操作" :width="180" align="center">
                <template #cell="{ record }">
                  <a-space>
                    <a-link @click="beginEdit(record)">编辑</a-link>
                    <a-link
                      style="color: rgb(var(--red-6))"
                      @click="handleDelete(record)"
                    >
                      删除
                    </a-link>
                  </a-space>
                </template>
              </a-table-column>
            </template>
          </a-table>
        </a-card>
      </a-col>
    </a-row>

    <ColumnEditor
      v-if="editorConfig.visible"
      :column="editorConfig.column"
      @close="handleEditorDone"
    />
  </div>
</template>

<style lang="less" scoped>
  .column-card {
    display: flex;
    align-items: center;
    &-pic {
      width: 40px;
      height: 40px;
      margin-right: 10px;
      img {
        width: 100%;
        height: 100%;
        display: block;
      }
    }
    &-name {
      font-weight: 600;
    }
  }
</style>
